<template>
  <h1>我是Vue3</h1>
  <h2>{{name}}</h2>
  <button @click="say">输出</button>
  <button @click="find">vue2配置输出vue2vue3数据</button>
  <button @click="test">vue3配置输出vue2vue3数据</button>
  <!-- vue3获取不到vue2的数据 -->
</template>

<script>

  export default {
    name: 'App',
    //也可以写vue2的东西
    data() {
      return {
        sex: '男'
      }
    },
    methods: {
      find() {
        //获取setup消息
        console.log(this.name);
        console.log(this.say)
        console.log(this.sex);
      }
    }
    ,
    setup() {
      let name = '张三'
      function say() {
        console.log(`我是${this.name}`);
      }
      function test() {
        console.log(name);
        console.log(say)
        console.log(this.sex);;
      }
      // 返回数据
      return {
        name, say, test
      }
      //返回一个渲染函数
      // return () => ('h1', '我是vue2的渲染函数')
    }
  }
//   尽量不要与Vue2.x配置混用
// - Vue2.x配置（data、methos、computed...）中<strong style="color:#DD5145">可以访问到</strong>setup中的属性、方法。
// - 但在setup中<strong style="color:#DD5145">不能访问到</strong>Vue2.x配置（data、methos、computed...）。
// - 如果有重名, setup优先。
</script>

<style>

</style>